<template>
  <div class="page-box">
    <el-breadcrumb separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">HeartGo</el-breadcrumb-item>
      <el-breadcrumb-item>写文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-input class="titleInput" v-model="title" placeholder="请输入文章标题" size="large"/>
    <div id="vditor"></div>
  </div>
</template>

<script>
import Vditor from "vditor";
import "vditor/src/assets/less/index.less";
import {COLOR_SCHEME_CACHE_KEY, DARK_THEME, LIGHT_THEME, MD_CONTENT} from "@/js/constants";

export default {
  name: "Write",
  data() {
    return {
      vditor: null,
      title: "",
    }
  },
  methods: {
    autoSetEditorTheme() {
      // 自动切换编辑器主题
      if (localStorage.getItem(COLOR_SCHEME_CACHE_KEY) === "dark") {
        this.vditor.setTheme(DARK_THEME.theme, DARK_THEME.contentTheme, DARK_THEME.codeTheme)
      } else {
        this.vditor.setTheme(LIGHT_THEME.theme, LIGHT_THEME.contentTheme, LIGHT_THEME.codeTheme)
      }
    },
  },
  mounted() {
    // 创建编辑器实例并挂载到元素#vditor
    let _toolbar = [
      'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|',
      'list', 'ordered-list', 'check', '|',
      'quote', 'line', 'code', 'inline-code', '|',
      'upload', 'record', 'table', '|',
      'fullscreen', 'edit-mode', 'export', 'help'
    ]
    if (window.innerWidth < 600) {
      _toolbar = _toolbar.filter((item) => {
        return ["edit-mode"].indexOf(item) === -1
      })
    }
    this.vditor = new Vditor("vditor", {
      height: window.innerHeight - 101,
      // minHeight: 500,
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: true,
      },
      tab: "    ",
      value: "",
      placeholder: "挥毫泼墨, 笔走龙蛇。",
      counter: {
        "enable": true
      },
      outline: {
        "enable": true
      },
      debugger: true,
      preview: {
        hljs: {
          lineNumber: true,
        },
        markdown: {
          autoSpace: true,
          fixTermTypo: true,
          toc: true,
          listStyle: true,
          mark: true,
        },
      },
      resize: {
        enable: false,
      },
      toolbar: _toolbar,
      after: () => {
        this.autoSetEditorTheme()
        this.vditor.setValue(MD_CONTENT)
      },
    })

    // 监听storage
    window.addEventListener("setItem", (e) => {
      if (e.key === COLOR_SCHEME_CACHE_KEY) {
        this.autoSetEditorTheme()
      }
    })

    // 跨标签页监听storage
    window.onstorage = (e) => {
      if (e.key === COLOR_SCHEME_CACHE_KEY) {
        this.autoSetEditorTheme()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.page-box {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  .page-box {
    padding: 0 50px;
  }
}

#vditor {
  text-align: left;
}

.titleInput {
  height: 40px;

  :deep(.el-input__wrapper) {
    border-radius: 0;
  }
}

.el-input--large {
  font-size: 24px;
}

.el-breadcrumb {
  padding: 10px 0 10px 5px;

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
    cursor: default;
  }
}

</style>